<template>
	<view class="echars-content">
		<view class="echars-content-statistics">
			<view class="echars-content-statistics-title">
				近七天数据统计
				<image class="echars-content-statistics-title-bg" src="../../../../static/bac-small.png"
					mode="scaleToFill"></image>
			</view>
			<view class="echars-content-statistics-text">
				<text>上次刷新时间:{{refreshData}}</text>
				<text>近七天刷新次数:{{exposureNum}}</text>
			</view>
			<view class="" style="margin: -40px 0;">
				<uni-ec-canvas class="uni-ec-canvas" id="line-chart" ref="canvasRef" canvas-id="lazy-load-chart" :ec="ec"></uni-ec-canvas>
			</view>
		</view>
		<view class="echars-content-statistics">
			<view class="echars-content-statistics-title">
				数据详情显示
				<image class="echars-content-statistics-title-bg" src="../../../../static/bac-small.png"
					mode="scaleToFill"></image>
			</view>
			<view class="echars-content-detail">
				<view @click="switchHandler(1)" class="echars-content-detail-btn"
					:class="{'echars-content-detail-btn-active':btnActive==1?true:false}">
					车源点击量
				</view>
				<view @click="switchHandler(2)" class="echars-content-detail-btn"
					:class="{'echars-content-detail-btn-active':btnActive==2?true:false}">
					电话访问量
				</view>
				<view @click="switchHandler(3)" class="echars-content-detail-btn"
					:class="{'echars-content-detail-btn-active':btnActive==3?true:false}">
					在售车源量
				</view>
				<view @click="switchHandler(4)" class="echars-content-detail-btn"
					:class="{'echars-content-detail-btn-active':btnActive==4?true:false}">
					主页访问量
				</view>
				<view @click="switchHandler(5)" class="echars-content-detail-btn"
					:class="{'echars-content-detail-btn-active':btnActive==5?true:false}">
					最近关注量
				</view>
				<view @click="switchHandler(6)" class="echars-content-detail-btn"
					:class="{'echars-content-detail-btn-active':btnActive==6?true:false}">
					车源曝光量
				</view>
			</view>
			<view class="echars-content-list">
				<view class="echars-content-list-item">
					<view class="echars-content-list-title">
						最近七天数据
					</view>
					<view class="echars-content-list-btn" @click="detailHandler(1,groundData.data7.date)">
						详情展示 >
					</view>
				</view>
				<view class="echars-content-list-item">
					<view class="echars-content-list-date">
						日期:{{groundData.data7.date}}
					</view>
					<view class="echars-content-list-num">
						{{groundData.data7.num}}次
					</view>
				</view>
			</view>
			<view class="echars-content-list">
				<view class="echars-content-list-item">
					<view class="echars-content-list-title">
						最近三十天数据
					</view>
					<view class="echars-content-list-btn" @click="detailHandler(2,groundData.data30.date)">
						详情展示 >
					</view>
				</view>
				<view class="echars-content-list-item">
					<view class="echars-content-list-date">
						日期:{{groundData.data30.date}}
					</view>
					<view class="echars-content-list-num">
						{{groundData.data30.num}}次
					</view>
				</view>
			</view>
			<view class="echars-content-list">
				<view class="echars-content-list-item">
					<view class="echars-content-list-title">
						最近两个月数据
					</view>
					<view class="echars-content-list-btn" @click="detailHandler(3,groundData.data60.date)">
						详情展示 >
					</view>
				</view>
				<view class="echars-content-list-item">
					<view class="echars-content-list-date">
						日期:{{groundData.data60.date}}
					</view>
					<view class="echars-content-list-num">
						{{groundData.data60.num}}次
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniEcCanvas from '@/pages/components/uni-ec-canvas/uni-ec-canvas'
	import * as echarts from '@/pages/components/uni-ec-canvas/echarts'
	import { getDataStatistic,getDataStatisticList,getDataStatisticGroud } from "@/api/user.js"
	let chart = null
	export default {
		data() {
			return {
				userData:{},
				groundData:{
					data7:{},
					data30:{},
					data60:{}
				},
				refreshData:"",
				exposureNum:0,
				chatData:[0, 0, 0, 0, 0, 0],
				ec: {
				  lazyLoad: true
				},
				
				isShowEcharts: false,
				myChart: null,
				btnActive: 1,
			}
		},
		components:{uniEcCanvas},
		methods: {
			getGroudData:function(){
				getDataStatisticGroud(this.userData.id,this.btnActive+'').then(res=>{
							  console.log("res===",res);
							  this.groundData=res.data
				})
			},
			switchHandler: function(num) {
				this.btnActive = num;
				this.getGroudData()
			},
			detailHandler: function(state,date) {
				console.log("查看详情");
				uni.navigateTo({
					url:`/pages/home/newCar/dataChart/dataChartDetails?state=${state}&active=${this.btnActive}&date=${date}&groundData=${JSON.stringify(this.groundData)}`
				})
			},
			initChart(canvas, width, height, canvasDpr) {
			  console.log(canvas, width, height, canvasDpr)
			 const  option= {
			    xAxis: {
			      type: 'category',
			      data: ['车源点 击量', '电话访 问量', '在售车 源量', '主页访 问量', '最近关 注量', '车源曝 光量'],
			      nameTextStyle: {
			      	fontSize: 10
			      },
			      axisLine: {
			      	show: false
			      },
			      axisTick: {
			      	show: false
			      },
			      axisLabel: {
			      	interval: 0,
			      	formatter: function(value) {
			      		const arr = value.split(" ")
			      		return `${arr[0]}\n${arr[1]}`
			      	}
			      },
			    },
			    yAxis: {
			      type: 'value',
			      axisLine: {
			      	show: false,
			      },
			      splitLine: {
			      	lineStyle: {
			      		color: "#F2F2F2"
			      	}
			      }
			    },
			    series: [{
			      // data: [0, 200, 150, 80, 70, 110],
			  	data: this.chatData,
			      type: 'bar',
			      showBackground: true,
			      label: {
			      	show: true,
			      	position: 'top'
			      },
			      itemStyle: {
			      	normal: {
			      		color: "#2D56C5",
			      		borderRadius: 30
			      	}
			      },
			      backgroundStyle: {
			      	color: 'rgba(180, 180, 180, 0.2)'
			      }
			    }]
			  },
			  chart = echarts.init(canvas, null, {
			    width: width,
			    height: height,
			    devicePixelRatio: canvasDpr
			  })
			  canvas.setChart(chart)
			  chart.setOption(option)
			  return chart
			},
		},
		onShow() {
			chart = null
			uni.setNavigationBarTitle({
				title: "数据报表"
			})
		},
		mounted () {
			const that=this
		  //报表数据
		  const userData=uni.getStorageSync('login')
		  this.userData=userData
		  getDataStatistic(userData.id).then(res=>{
			  const result=res.data
			  const totalNum=res.data
			  this.chatData=[totalNum.hits_num,totalNum.dial_num,totalNum.cars_num,totalNum.visits_num,totalNum.attention_num,totalNum.exposure_num]
			  this.refreshData=result.length && result[result.length-1].time;
			  this.exposureNum=result.refresh_num
			  that.$refs.canvasRef.init(that.initChart)
		  })
		  this.getGroudData()
		}
	}
</script>

<style scoped lang="scss">
	.uni-ec-canvas {
	  width: 100%;
	  height: 300px; 
	  display: block;
	}
	.echars-content {
		padding: 10px;
		font-size: 12px;
		width: 100%;

		&-chat {
			margin: -40px 0;
		}

		&-statistics {
			background-color: #fff;
			border-radius: 8px;
			padding: 15px 10px;
			width: 100%;

			&-title {
				font-size: 15px;
				font-weight: bold;
				position: relative;

				&::before {
					content: "";
					display: inline-block;
					width: 3px;
					height: 12px;
					background-color: #2D56C5;
					margin-right: 8px;
				}

				&-bg {
					position: absolute;
					top: 6px;
					left: 40px;
					width: 60px;
					height: 15px;
				}
			}

			&-text {
				line-height: 30px;

				& text:last-child {
					margin-left: 20px;
				}
			}
		}

		&-detail {
			display: grid;
			grid-template-columns: repeat(3, auto);

			&-btn {
				padding: 7px 10px;
				border: 1px solid #E6E6E6;
				border-radius: 12px;
				margin: 5px 5px;
				text-align: center;
				color: #000;
				background-color: #fff;

				&-active {
					color: #fff;
					background-color: #2D56C5;
				}
			}
		}

		&-list {
			border: 1px solid #E6E6E6;
			padding: 5px 10px 10px;
			border-radius: 7px;
			margin: 10px 0;

			&-item {
				display: flex;
				justify-content: space-between;
				line-height: 30px;
			}

			&-title {
				background: linear-gradient(90deg, #2D56C5 0%, rgba(45, 86, 197, 0.5) 100%);
				margin-top: -5px;
				margin-left: -10px;
				font-size: 12px;
				color: #fff;
				border-top-left-radius: 7px;
				border-bottom-right-radius: 7px;
				padding: 2px 25px 0px 10px;
				height: 30px;
				line-height: 30px;
			}

			&-num {
				font-size: 15px;
				font-weight: bold;
			}
		}
	}

	#barChat {
		width: 100%;
		height: 300px;
		margin-top: -35px;
		margin-bottom: -40px;
	}
	.echars-content-chat{
		position: absolute;
		top: 10px;
		left: 10px;
		width: 300px;
		height: 300px;
	}
</style>